<template>
	<view class="container">
		
		<com-head textTit="修改手机号" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="groupItem">
			<view class="list ">
				<view class="left">
					 <view class="tit">手机号</view>
					 <input type="number" v-model="form.phone" placeholder="请输入手机号" placeholder-style="color:#999999"/>
				</view>
			</view>
			<view class="list ">
				<view class="left">
					 <view class="tit">验证码</view>
					 <input style="width: 220rpx;" type="number" v-model="form.code" placeholder="请输入验证码" placeholder-style="color:#999999"/>
				</view>
				<text @click.stop="sendBtn()" :class="disabled ? 'disabled' :''">{{msg}}</text>
			</view>
		</view>
		<view class="submit" @click="submit()">
			确定
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				time:60,
				disabled:false,
				msg:"发送验证码",
				img:'',
				list:[],
				form:{
					phone:'',
					code:'',
				},
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad() {
			this.form.phone = this.userInfo.phone
		},
		methods: {
			async sendBtn(){
				if(this.disabled){
					return false
				}
				if(!this.form.phone){
					this.utlis.Toast('手机号不能为空！')
				}else{
					let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
					if (!reg.test(this.form.phone)) {
						this.$u.toast('手机号格式不正确！')
						return false
					}
					let {data,code} = await this.$u.api.massCode({phone:this.form.phone});
					if(code){
						this.utlis.Toast('发送成功，请注意查收！')
						this.timer()
					}else{
						this.utlis.Toast('验证码发送失败！')
					}
				}
			},
			timer() {
				 if (this.time > 0) {
					this.disabled=true;
					this.time--;
					this.msg=this.time+"秒后重新发送";
					setTimeout(this.timer, 1000);
				 } else{
					this.time=60;
					this.msg="发送验证码";
					this.disabled=false;
				 }
			},
			async submit(type,img){
				if(!this.form.phone){
					this.utlis.Toast("手机号码不能为空")
					return 
				}
				if(!this.form.code){
					this.utlis.Toast("短信验证码不能为空")
					return 
				}
				let {code,data} = await this.$u.api.setInfo(this.form);
				if(code){
					await this.getUserInfo()
					this.utlis.backPage()
					this.utlis.Toast("修改成功","success")
					// setTimeout(()=>{
						
					// },300)
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let {code,data} = await this.$u.api.userInfo({store_id:this.store_id});
				if(code){
					this.$u.vuex('userInfo', data)
				}
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 30rpx;
	.submit{
		width: 686rpx;
		margin-top: 180rpx;
		line-height: 96rpx;
		background: linear-gradient(140deg,#50DCC2 0%, #007664);
		border-radius: 48rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		position: fixed;
		bottom: 200rpx;
	}
	.common{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 8rpx ;
		padding: 35rpx 32rpx;
		.left{
			display: flex;
			align-items: center;
			image{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-right: 62rpx;
			}
			.tit{
				width: 96rpx;
				margin-right: 62rpx;
			}
			.txt{
				color: #999999;
				font-size: 24rpx;
			}
			.nickName{
				color: #333333;
				font-size: 24rpx;
			}
		}
	}
	.groupItem{
		padding: 0 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-top: 20rpx;
		.list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			padding: 35rpx 0;
			&:last-child{
				border: none;
			}
			.left{
				display: flex;
				align-items: center;
				.tit{
					width: 110rpx;
					margin-right: 50rpx;
				}
				.txt{
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}
	.editProfile{
		padding: 32rpx 32rpx 32rpx 25rpx;
		margin-bottom: 30rpx;
	}
	.black{
		color: #333333 !important;
	}
}
.disabled{
	color: #999 !important;
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
